<template>
  <div class="routerLinkTo1">
    <!-- 第一种to的字符串写法 -->
    <router-link active-class="active" to="/routerLinkTo2"
      >routerLinkTo2法1</router-link
    >
    <br />
    <!-- 第二种to的对象写法 -->
    <router-link active-class="active" :to="{ path: '/routerLinkTo2' }"
      >routerLinkTo2写法2</router-link
    >
    <br>
    <!-- 第三种to使用name跳转 -->
    <router-link active-class="active" :to="{name:'hook'}">routerLink使用name跳转到hook页面</router-link>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
</script>
<style scoped>
.routerLinkTo1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
